<!DOCTYPE HTML>

<html>
    
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
        <title>在线试戴眼镜 - 爱大爱</title>
        <meta name="description" content="">
        <meta name="keywords" content="">
        <link rel="stylesheet" href="css/main.css">
    </head>
    <body>
        
        <div class="wrap">
            <div class="header"><h2 class="title">上传靓照</h2></div>
            <div class="content">
                <div class="upload-box wrap-box">
                    <div class="fix">
                        <img class="ico" src="../img/upload.png">
                        <ul class="panel">
                            <li><a id="uploadPicBtn" href="javascript:void(0);" title="上传靓照">上传靓照</a></li>
                            <li><a id="choiceModelBtn" href="javascript:void(0);" title="选择模特">选择模特</a></li>
                        </ul>
                        <img id="tmpPIC">
                        <input id="uploadElement" type="file" accept="image/*">
                    </div>
                </div>
                <div class="model-box wrap-box">
                    <div class="fix">
                        <ul id="modelList"></ul>
                    </div>
                </div>
                <div class="glass-box wrap-box">
                    <div class="fix">
                        <ul id="glassList"></ul>
                    </div>
                </div>
                <div class="view-box wrap-box" style="display: none;">
                    <div class="fix">
                        <div id="editZone"><img id="glassElement" draggable="false" data-zoom="1"></div>
                        <ul class="glass-panel">
                            <li><a id="zoom" href="javascript:void(0);" title="放大镜框"></a></li>
                            <li><a id="zoomOut" href="javascript:void(0);" title="缩小镜框"></a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="footer">
                <ul class="menu-bar">
                    <li class="curr">
                        <a href="javascript:void(0);" data-target="upload-box" data-title="上传靓照">
                            <i class="ico-upload"></i>
                            <span>上传</span>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0);" data-target="model-box" data-title="在线模特">
                            <i class="ico-model"></i>
                            <span>模特</span>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0);" data-target="glass-box" data-title="镜框模型">
                            <i class="ico-glass"></i>
                            <span>镜框</span>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0);" data-target="view-box" data-title="即时预览">
                            <i class="ico-preview"></i>
                            <span>预览</span>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
        
        <!-- JS Files -->
        <script type="text/javascript" src="js/lib/zepto.min.js"></script>
        <script type="text/javascript" src="js/lib/plugin/uploadPreview.min.js"></script>
        <script type="text/javascript" src="js/app/index.js"></script>
        
    </body>
    
</html>